
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        canvas.width=800;
        canvas.height=800;
        var context=canvas.getContext("2d");

        /*  var image=new Image();
         image.src="../image.jpg";
         image.onload=function(){
         var pattern=context.createPattern(image,"no-repeat");
         context.fillStyle=pattern;
         context.fillRect(0,0,800,800)

         }*/

        var backCanvas=createBackgroundCanvas();
        var pattern=context.createPattern(backCanvas,"repeat");
        context.fillStyle=pattern;
        context.fillRect(0,0,800,800);
       function createBackgroundCanvas(){
           var backCanvas=document.createElement("canvas");
           backCanvas.width=100;
           backCanvas.height=100;
           var backCanvasContext=backCanvas.getContext("2d");
           drawStar(backCanvasContext,50,50,50,0);
           return backCanvas;
       }
        function drawStar(cxt,x,y,R,rot){
            cxt.save();

            cxt.translate(x,y);
            cxt.rotate(rot/180*Math.PI);
            cxt.scale(R,R);

            starPath(cxt);

            cxt.fillStyle="#fb3";
            cxt.fill();

            cxt.restore();
        }
        function starPath(cxt){
            cxt.beginPath();
            for(var i=0;i<5;i++){
                cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
                        -Math.sin((18+i*72)/180*Math.PI));
                cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
                        -Math.sin((54+i*72)/180*Math.PI)*0.5);
            }
            cxt.closePath();
        }
    }
</script>
</body>
</html>